<template>
  <div class="footer">
    <div class="enable" v-if="!flag" >
      <div class="num">{{commentLength}}</div>
      <input class="input" type="text" :placeholder="placeholderText=='写评论'?'写评论': '回复@'+placeholderText+':'" @focus="myfocus" :value="value"></input>
      <span class="iconfont iconpinglun-"></span>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <div class="disable" v-if="flag">
      <textarea :placeholder="placeholderText=='写评论'?'写评论': '回复@'+placeholderText+':'" rows="3" ref="textareaRef" @blur="myblur" v-model="value"></textarea>
      <button @click="send">发送</button>
    </div>
  </div>
</template>
<script>

export default {
  props:['placeholderText','commentLength'],
  data(){
    return{
      flag:false,
      value:''
    }
  },
  methods: {
    myfocus(){
      this.flag = true
      this.$nextTick(()=>{
        this.$refs.textareaRef.focus()
      })
    },
    myblur(){
      setTimeout(() => {
        this.flag = false
      }, 300);
    },
    send(){
      if(this.value.trim().length===0){
         return  this.$toast.fail('输入评论')
      }
      this.$emit('sendComment',this.value)
      this.value=""
    }
  },
}
</script>
<style lang="less" scoped>
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  padding: 0 2.778vw;
  box-sizing: border-box;
  .enable {
    height: 11.111vw;
    display: flex;
    align-items: center;
    .input {
      flex: 1;
      border:none;
      outline: none;
      background: #d7d7d7;
      margin-right: 8.333vw;
      padding-left: 4.167vw;
      height: 8.333vw;
      border-radius: 4.167vw;
      line-height: 8.333vw;
      color: #333;
      font-size: 3.889vw;
    }
    span {
      display: block;
      width: 11.111vw;
      font-size: 7.222vw;
      margin-right: 1.389vw;
      color: #595959;
    }
    .num {
      position: absolute;
      background: red;
      font-size: 3.333vw;
      color: #fff;
      padding: 0 1.667vw;
      height: 4.444vw;
      line-height: 4.444vw;
      text-align: center;
      border-radius: 2.222vw;
      right: 29.167vw;
      top: 0vw;
    }
  }
  .disable{
    display: flex;
    margin:15px;
    align-items: flex-end;
    
    textarea{
      flex:1;
      background:#d7d7d7;
      resize: none;
      outline: none;
      border:none;
      border-radius: 10px;
      padding:10px;
    }
    button{
      height:30px;
      line-height: 30px;
      font-size: 14px;
      background: red;
      border:none;
      padding: 0 10px;
      margin-left:10px;
      border-radius: 15px;
      color:#fff;
    }
  }
}
</style>